<div ng-controller="Core.PluginPreferences">
  <form class="form-horizontal">

    <div class="control-group">
      <label class="control-label">Perspective</label>

      <div class="controls">
        <select ng-model="perspectiveId" required="required" ng-options="p.id as p.title for p in perspectives">
        </select>
        <span class="help-block">Configure plugins in selected perspective<br/><br/>Click icon to toggle state on the plugin, and click the apply button to save changes.</span>
      </div>
    </div>
    <div class="control-group">

      <div class="span6">

        <div class="controls">
          <div>
            <table class="table table-condensed table-striped">
              <tr>
                <th><i class="icon-double-angle-down"></i>/<i class="icon-double-angle-up"></i></th>
                <th>Plugin</th>
                <th>Enabled</th>
                <th>Default</th>
              </tr>
              <tr ng-repeat="plugin in plugins">
                <td>
                  <i class="icon-double-angle-up clickable" ng-hide="$first" ng-click="pluginMoveUp($index)"
                     title="Click to move this plugin up in the navigation bar"></i>
                  <i class="icon-double-angle-down clickable" ng-hide="$last" ng-click="pluginMoveDown($index)"
                     title="Click to move this plugin down in the navigation bar"></i>
                </td>
                <td title="This is the name of the plugin">
                  {{plugin.displayName}}
                </td>
                <td>
                  <i class="orange icon-off clickable" ng-hide="plugin.enabled" ng-click="pluginEnable($index)"
                     title="This plugin is disabled and not available on the navigation bar"></i>
                  <i class="green icon-play-circle clickable" ng-hide="!plugin.enabled" ng-click="pluginDisable($index)"
                     title="This plugin is enabled"></i>
                </td>
                <td>
                  <i class="icon-check-empty clickable" ng-hide="plugin.isDefault" ng-click="pluginDefault($index)"
                     title="Click to select this plugin as the default plugin to use on startup"></i>
                  <i class="icon-check clickable" ng-hide="!plugin.isDefault" ng-click="pluginDefault($index)"
                     title="This is the default plugin"></i>
                </td>
              </tr>
            </table>
            <button class="btn btn-primary" ng-disabled="!pluginDirty" ng-click="pluginApply()">Apply plugin changes</button>
          </div>
        </div>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">Auto refresh</label>

      <div class="controls">
        <input type="checkbox" ng-model="autoRefresh">
        <span class="help-block">Automatically refresh the app when a plugin is updated</span>
      </div>
    </div>

  </form>
</div>

